import React, {createRef} from "react"
import './index.scss'
import ContentView from "../../components/ContentView"
import ScrollContent from "../../components/ScrollContent"
import ToggleBtnGroup from "../../components/ToggleBtnGroup"
import ListItem from '../../components/ListItem'
import {productDataSource} from '../../http/api'
const {SupplyItem,BuyItem,} = ListItem
export default class ProductList extends React.Component{
        constructor (props) {
                super (props);
                this.state={
                        dataSource:[],
                        productType:0,
                        orderType:1,
                        loadingStatus:false
                }
                this.offset=0;
                this.scrollRef = createRef()
        }
        getDataSource=()=>{
                const {productType,orderType,loadingStatus} = this.state
                if (loadingStatus) {
                        return
                }
                productDataSource({productType:productType+1,orderType,offset:this.offset,row:10}).then(res=>{
                        const {list,count} = res
                        const {dataSource} = this.state
                        let loadingStatus = dataSource.length===count
                        this.setState({loadingStatus,dataSource:[...dataSource,...list]},()=>{
                                if (this.scrollRef.current) {
                                        this.scrollRef.current.finishUpload()
                                }
                        })
                })
        }
        handleOnPullUp=()=>{
                this.offset = this .offset +10
                this.getDataSource()
        }
        componentWillMount () {
                this.getDataSource()
        }
        handleOnToggleBtnClick=orderType=>{
                this.offset = 0
                this.setState({orderType,dataSource:[],loadingStatus:false},this.getDataSource)
        }
        handleTypeToggle=productType=>{
                this.setState({productType,dataSource:[],loadingStatus:false,orderType:1},this.getDataSource)
        }
        render () {
                const {productType,orderType,dataSource,loadingStatus} = this.state
                const itemRender = [
                        dataSource.map((item,key)=><SupplyItem dataSource={item} key={key}/>),
                        dataSource.map((item,key)=><BuyItem dataSource={item} key={key}/>)
                ][productType]
                return <ContentView>
                        <div slot='header' className='product-list-header'>
                                <div className="header-container">
                                        <ToggleBtnGroup defaultBtnValue={productType} onClick={this.handleTypeToggle}/>
                                </div>
                                <div className="search-btn"/>
                        </div>
                        <div className="product-list" slot='content'>
                                <div className="nav-bar-wrapper">
                                        <div className={`bar-item ${orderType===1&&'active'}`} onClick={this.handleOnToggleBtnClick.bind(this,1)}>
                                                <span className='bar-item-text'>综合排序</span>
                                        </div>
                                        <div className={`bar-item ${orderType===2&&'active'}`} onClick={this.handleOnToggleBtnClick.bind(this,2)}>
                                                <span className='bar-item-text'>价格降序</span>
                                        </div>
                                        <div className={`bar-item ${orderType===3&&'active'}`} onClick={this.handleOnToggleBtnClick.bind(this,3)}>
                                                <span className='bar-item-text'>价格升序</span>
                                        </div>
                                        <div className="filter-item">
                                                <span>筛选</span>
                                        </div>
                                </div>
                                <div className="page-scroll-main">
                                        <ScrollContent
                                                ref={this.scrollRef}
                                                loading={true}
                                                loadingStatus={loadingStatus}
                                                onUpload={this.handleOnPullUp}
                                        >
                                                {itemRender}
                                        </ScrollContent>
                                </div>
                        </div>
                </ContentView>
        }
}
